<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Virtualized Table 虚拟化表格 | Element Plus</title>
    <meta name="description" content="A Vue 3 based component library for designers and developers">
    <link rel="stylesheet" href="/assets/style.e2a9e121.css">
    <link rel="modulepreload" href="/assets/chunks/tree-data.571cf9ca.js">
    <link rel="modulepreload" href="/assets/chunks/contributors.b1907dec.js">
    <link rel="modulepreload" href="/assets/app.9c6c24e4.js">
    <link rel="modulepreload" href="/assets/chunks/dayjs.min.64b12ca8.js">
    <link rel="modulepreload" href="/assets/zh-CN_component_table-v2.md.7351c605.lean.js">
    
    <link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#409eff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta property="og:image" content="/images/element-plus-og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:description" content="A Vue 3 based component library for designers and developers">
  <script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
  <script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
  <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
  <script async="true">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</script>
  <script async="true">var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
  <script>(()=>{const e=localStorage.getItem("el-theme-appearance");(e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="twitter:title" content="Virtualized Table 虚拟化表格 | Element Plus">
  <meta property="og:title" content="Virtualized Table 虚拟化表格 | Element Plus">
  </head>
  <body>
    <div id="app"><div class="App"><!--[--><span tabindex="-1" data-v-d2e1b550></span><a href="#page-content" class="skip-link visually-hidden" data-v-d2e1b550>跳转到内容</a><!--]--><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-74f3ae96><div class="header-container" data-v-74f3ae96><div class="logo-container" data-v-74f3ae96><a href="/zh-CN/" data-v-74f3ae96><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-74f3ae96></a></div><div class="content" data-v-74f3ae96><div id="docsearch" class="algolia-search-box search" data-v-74f3ae96></div><nav class="navbar-menu menu" data-v-74f3ae96><!--[--><a class="link-item link is-menu-link" href="/zh-CN/guide/design" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->指南<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/zh-CN/component/overview" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->组件<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/zh-CN/resource/index" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->资源<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-74f3ae96 data-v-b1b91f92><div aria-label="切换暗色主题" aria-checked="false" data-v-b1b91f92 data-v-0180af72><!----></div></div><div class="translation-container translation" data-v-74f3ae96 data-v-12008bb2><!----></div><div class="social-links" data-v-74f3ae96 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-72eabb9c><i class="el-icon" style="font-size:24px;" data-v-72eabb9c><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72eabb9c><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><button class="reset-btn menu-hamburger hamburger" aria-label="移动端导航" aria-expanded="false" aria-controls="full-screen" data-v-74f3ae96><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></button></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><button class="reset-btn sidebar-button flex items-center" aria-expanded="false"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></button><button ariadisabled="false" type="button" class="el-button is-link go-back-top height-5" style=""><!--v-if--><span class=""><!--[--> Back to top <!--]--></span></button></div><div class="el-scrollbar sidebar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><aside><!--[--><div class="page-content-main-b" data-v-0407b15a><p class="title" data-v-0407b15a>赞助商</p><div data-v-0407b15a data-v-23d0a532><!--[--><a href="https://melecode.com/" title="美乐 - 企业级全栈低代码开发平台" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/mele-banner.png" alt="美乐" data-v-23d0a532></a><a href="https://vform666.com/" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/vform-banner.png" alt="VForm" data-v-23d0a532></a><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/jnpfsoft.jpg" alt="JNPF" data-v-23d0a532></a><!--]--></div><div data-v-0407b15a data-v-97807a40><!--[--><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Overview 组件总览</p><!--[--><a class="link" href="/zh-CN/component/overview" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Overview 组件总览</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Basic 基础组件</p><!--[--><a class="link" href="/zh-CN/component/button" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Button 按钮</p><!----></a><a class="link" href="/zh-CN/component/border" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Border 边框</p><!----></a><a class="link" href="/zh-CN/component/color" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color 色彩</p><!----></a><a class="link" href="/zh-CN/component/container" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Container 布局容器</p><!----></a><a class="link" href="/zh-CN/component/icon" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Icon 图标</p><!----></a><a class="link" href="/zh-CN/component/layout" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout 布局</p><!----></a><a class="link" href="/zh-CN/component/link" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Link 链接</p><!----></a><a class="link flex items-center" href="/zh-CN/component/text" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Text 文本</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.3.0<!--]--></span><!--v-if--></span></a><a class="link" href="/zh-CN/component/scrollbar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Scrollbar 滚动条</p><!----></a><a class="link" href="/zh-CN/component/space" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Space 间距</p><!----></a><a class="link" href="/zh-CN/component/typography" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Typography 排版</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">配置组件</p><!--[--><a class="link" href="/zh-CN/component/config-provider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Config Provider 全局配置</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form 表单组件</p><!--[--><a class="link" href="/zh-CN/component/autocomplete" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Autocomplete 自动补全输入框</p><!----></a><a class="link" href="/zh-CN/component/cascader" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Cascader 级联选择器</p><!----></a><a class="link" href="/zh-CN/component/checkbox" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Checkbox 多选框</p><!----></a><a class="link" href="/zh-CN/component/color-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color Picker 取色器</p><!----></a><a class="link" href="/zh-CN/component/date-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Date Picker 日期选择器</p><!----></a><a class="link" href="/zh-CN/component/datetime-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>DateTime Picker 日期时间选择器</p><!----></a><a class="link" href="/zh-CN/component/form" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Form 表单</p><!----></a><a class="link" href="/zh-CN/component/input" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input 输入框</p><!----></a><a class="link" href="/zh-CN/component/input-number" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input Number 数字输入框</p><!----></a><a class="link" href="/zh-CN/component/radio" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Radio 单选框</p><!----></a><a class="link" href="/zh-CN/component/rate" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Rate 评分</p><!----></a><a class="link" href="/zh-CN/component/select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Select 选择器</p><!----></a><a class="link" href="/zh-CN/component/select-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Select 虚拟化选择器</p><!----></a><a class="link" href="/zh-CN/component/slider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Slider 滑块</p><!----></a><a class="link" href="/zh-CN/component/switch" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Switch 开关</p><!----></a><a class="link" href="/zh-CN/component/time-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Picker 时间选择器</p><!----></a><a class="link" href="/zh-CN/component/time-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Select 时间选择</p><!----></a><a class="link" href="/zh-CN/component/transfer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Transfer 穿梭框</p><!----></a><a class="link flex items-center" href="/zh-CN/component/tree-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>TreeSelect 树形选择</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/zh-CN/component/upload" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Upload 上传</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data 数据展示</p><!--[--><a class="link" href="/zh-CN/component/avatar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Avatar 头像</p><!----></a><a class="link" href="/zh-CN/component/badge" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Badge 徽章</p><!----></a><a class="link" href="/zh-CN/component/calendar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Calendar 日历</p><!----></a><a class="link" href="/zh-CN/component/card" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Card 卡片</p><!----></a><a class="link" href="/zh-CN/component/carousel" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Carousel 走马灯</p><!----></a><a class="link" href="/zh-CN/component/collapse" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Collapse 折叠面板</p><!----></a><a class="link" href="/zh-CN/component/descriptions" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Descriptions 描述列表</p><!----></a><a class="link" href="/zh-CN/component/empty" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Empty 空状态</p><!----></a><a class="link" href="/zh-CN/component/image" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Image 图片</p><!----></a><a class="link" href="/zh-CN/component/infinite-scroll" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Infinite Scroll 无限滚动</p><!----></a><a class="link" href="/zh-CN/component/pagination" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Pagination 分页</p><!----></a><a class="link" href="/zh-CN/component/progress" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Progress 进度条</p><!----></a><a class="link" href="/zh-CN/component/result" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Result 结果</p><!----></a><a class="link" href="/zh-CN/component/skeleton" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Skeleton 骨架屏</p><!----></a><a class="link" href="/zh-CN/component/table" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Table 表格</p><!----></a><a class="link active flex items-center" href="/zh-CN/component/table-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Table 虚拟化表格</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/zh-CN/component/tag" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tag 标签</p><!----></a><a class="link" href="/zh-CN/component/timeline" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Timeline 时间线</p><!----></a><a class="link flex items-center" href="/zh-CN/component/tour" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tour 漫游式引导</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.5.0<!--]--></span><!--v-if--></span></a><a class="link" href="/zh-CN/component/tree" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tree 树形控件</p><!----></a><a class="link" href="/zh-CN/component/tree-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Tree 虚拟化树形控件</p><!----></a><a class="link flex items-center" href="/zh-CN/component/statistic" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Statistic 统计组件</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.30<!--]--></span><!--v-if--></span></a><a class="link flex items-center" href="/zh-CN/component/segmented" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Segmented 分段控制器</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.7.0<!--]--></span><!--v-if--></span></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation 导航</p><!--[--><a class="link" href="/zh-CN/component/affix" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Affix 固钉</p><!----></a><a class="link flex items-center" href="/zh-CN/component/anchor" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Anchor 锚点</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.6.0<!--]--></span><!--v-if--></span></a><a class="link" href="/zh-CN/component/backtop" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Backtop 回到顶部</p><!----></a><a class="link" href="/zh-CN/component/breadcrumb" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Breadcrumb 面包屑</p><!----></a><a class="link" href="/zh-CN/component/dropdown" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dropdown 下拉菜单</p><!----></a><a class="link" href="/zh-CN/component/menu" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Menu 菜单</p><!----></a><a class="link" href="/zh-CN/component/page-header" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Page Header 页头</p><!----></a><a class="link" href="/zh-CN/component/steps" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Steps 步骤条</p><!----></a><a class="link" href="/zh-CN/component/tabs" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tabs 标签页</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback 反馈组件</p><!--[--><a class="link" href="/zh-CN/component/alert" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Alert 提示</p><!----></a><a class="link" href="/zh-CN/component/dialog" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dialog 对话框</p><!----></a><a class="link" href="/zh-CN/component/drawer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Drawer 抽屉</p><!----></a><a class="link" href="/zh-CN/component/loading" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Loading 加载</p><!----></a><a class="link" href="/zh-CN/component/message" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message 消息提示</p><!----></a><a class="link" href="/zh-CN/component/message-box" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message Box 消息弹出框</p><!----></a><a class="link" href="/zh-CN/component/notification" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Notification 通知</p><!----></a><a class="link" href="/zh-CN/component/popconfirm" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popconfirm 气泡确认框</p><!----></a><a class="link" href="/zh-CN/component/popover" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popover 弹出框</p><!----></a><a class="link" href="/zh-CN/component/tooltip" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tooltip 文字提示</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others 其他</p><!--[--><a class="link" href="/zh-CN/component/divider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Divider 分割线</p><!----></a><a class="link flex items-center" href="/zh-CN/component/watermark" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Watermark 水印 </p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.4.0<!--]--></span><!--v-if--></span></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div><main id="page-content" class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="virtualized-table-虚拟化表格" tabindex="-1">Virtualized Table 虚拟化表格 <span class="vp-tag beta">beta</span> <a class="header-anchor vp-link" href="#virtualized-table-虚拟化表格" aria-hidden="true">#</a></h1><p>在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 <a href="./table.html" class="vp-link">Table V1</a>来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。</p><p>通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该组件<strong>仍在测试中</strong>，生产环境使用可能有风险。 若您发现了 bug 或问题，请于 <a href="https://github.com/element-plus/element-plus/issues" class="vp-link" target="_blank" rel="noopener noreferrer">GitHub<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> 报告给我们以便修复。 同时，有一些 API 并未在此文档中提及，因为部分还没有开发完全，因此我们不在此提及。</p><p><strong>即使</strong>虚拟化的表格是高效的，但是当数据负载过大时，<strong>网络</strong>和<strong>内存容量</strong>也会成为您应用程序的瓶颈。 因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在 SSR 场景下，您需要将组件包裹在 <code>&lt;client-only&gt;&lt;/client-only&gt;</code> 之中 (如: <a href="https://nuxt.com/v3" class="vp-link" target="_blank" rel="noopener noreferrer">Nuxt<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>) 和 SSG (例如: <a href="https://vitepress.vuejs.org/" class="vp-link" target="_blank" rel="noopener noreferrer">VitePress<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>).</p></div><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor vp-link" href="#基础用法" aria-hidden="true">#</a></h2><p>让我们演示虚拟化表的性能，用10列和1 000行渲染一个基本示例。</p><!----><h2 id="自动调整大小" tabindex="-1">自动调整大小 <a class="header-anchor vp-link" href="#自动调整大小" aria-hidden="true">#</a></h2><p>如果不想手动向表格传递 <code>width</code> 和 <code>height</code> 属性，可以使用 AutoResizer 对表格组件进行封装。 这会自动为你更新宽度和高度。</p><p>尝试调整您的浏览器大小来看看它是如何工作的。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>由于 <code>AutoResizer</code> 组件的默认高度是 100%，所以请确保该组件的父元素<strong>拥有固定的高度值</strong>。 或者，您可以通过将 <code>style</code> 属性传递到 <code>AutoResizer</code> 来定义它。</p></div><!----><h2 id="customize-cell-renderer" tabindex="-1">自定义单元格渲染器 <a class="header-anchor vp-link" href="#customize-cell-renderer" aria-hidden="true">#</a></h2><p>当然，您可以根据您的需要呈现表格单元格。 这是如何自定义您的单元格的简单例子。</p><!----><h2 id="带有选择的表格" tabindex="-1">带有选择的表格 <a class="header-anchor vp-link" href="#带有选择的表格" aria-hidden="true">#</a></h2><p>使用自定义的单元格渲染来给表格组件添加选择的能力。</p><!----><h2 id="可编辑单元格" tabindex="-1">可编辑单元格 <a class="header-anchor vp-link" href="#可编辑单元格" aria-hidden="true">#</a></h2><p>类似上面添加筛选框的方法，我们可以用同样的方法实现可编辑单元格。</p><!----><h2 id="带状态的表格" tabindex="-1">带状态的表格 <a class="header-anchor vp-link" href="#带状态的表格" aria-hidden="true">#</a></h2><p>可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。</p><p>要自定义行的外观，请使用 <code>row-class-name</code> 属性。 举个例子，每10行会自动添加 <code>bg-blue-200</code> 类名，每5行会添加 <code>bg-red-100</code> 类名。</p><!----><h2 id="表格行的粘性布局" tabindex="-1">表格行的粘性布局 <a class="header-anchor vp-link" href="#表格行的粘性布局" aria-hidden="true">#</a></h2><p>您可以简单地使用 <code>fixed-data</code> 属性来实现将某些行固定到表格的头部。</p><p>您可以根据滚动事件动态设置粘性行，如这个示例所示。</p><!----><h2 id="固定列表格" tabindex="-1">固定列表格 <a class="header-anchor vp-link" href="#固定列表格" aria-hidden="true">#</a></h2><p>如果您想要有列粘贴左侧或右侧的某种原因。 您可以通过向表中添加特殊属性来实现这一点。</p><p>您可以设置该行的<code> fixed</code> 属性为 <code>true</code> （代表<code>FixedDir.LEFT</code>）、<code>FixedDir.LEFT</code> 或 <code>FixedDir.RIGHT</code></p><!----><h2 id="表头分组" tabindex="-1">表头分组 <a class="header-anchor vp-link" href="#表头分组" aria-hidden="true">#</a></h2><p>正如这个示例，通过自定义表头渲染以将表头分组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在这种情况下，我们使用了 <code>JSX</code> 功能，这个功能在playground上不被支持。 您可以在本地环境或在线集成开发环境（如 <code>codesandbox</code> ）中试用它们。</p><p>建议您使用 JSX 使用您的表格组件，因为它包含 VNode 操作。</p></div><!----><h2 id="过滤器" tabindex="-1">过滤器 <a class="header-anchor vp-link" href="#过滤器" aria-hidden="true">#</a></h2><p>虚拟表格提供自定义页眉渲染器以创建自定义标题。 然后我们可以利用这些来渲染过滤器。</p><!----><h2 id="可排序表格" tabindex="-1">可排序表格 <a class="header-anchor vp-link" href="#可排序表格" aria-hidden="true">#</a></h2><p>您可以使用排序状态来对表格进行排序。</p><!----><h2 id="受控的排序" tabindex="-1">受控的排序 <a class="header-anchor vp-link" href="#受控的排序" aria-hidden="true">#</a></h2><p>您可以在需要时定义多个可排序的列。 请记住，当您在定义了多个可排序的列时， UI 可能会显得有些奇怪，因为用户不知道哪一列被排序。</p><!----><h2 id="高亮显示鼠标悬停单元格" tabindex="-1">高亮显示鼠标悬停单元格 <a class="header-anchor vp-link" href="#高亮显示鼠标悬停单元格" aria-hidden="true">#</a></h2><p>当处理一个大的列表时，很容易丢失当前行的轨迹和您正在访问的一列。 在这种情况下，使用这个功能可能很有帮助。</p><!----><h2 id="横跨列" tabindex="-1">横跨列 <a class="header-anchor vp-link" href="#横跨列" aria-hidden="true">#</a></h2><p>虚拟化表格没有使用内置的 <code>table</code> 元素，故 <code>colspan</code> 和 <code>rowspan</code> 与 <a href="./table.html" class="vp-link">TableV1</a> 比较略有不同。 然而，通过定制的行渲染器，这些功能仍然可以实现。 在本节中，我们将演示如何实现这一点。</p><!----><h2 id="纵跨行" tabindex="-1">纵跨行 <a class="header-anchor vp-link" href="#纵跨行" aria-hidden="true">#</a></h2><p>既然我们已经覆盖了 <a href="#colspan" class="vp-link">Colspan</a>，那我们也可以覆盖Row也是没问题的。 它与colspan略有不同，但是 的想法基本上是一样的。</p><!----><h2 id="同时跨行和跨列" tabindex="-1">同时跨行和跨列 <a class="header-anchor vp-link" href="#同时跨行和跨列" aria-hidden="true">#</a></h2><p>我们当然可以同时使用横跨列与纵跨行来满足您的业务需求！</p><!----><h2 id="树形数据" tabindex="-1">树形数据 <a class="header-anchor vp-link" href="#树形数据" aria-hidden="true">#</a></h2><p>虚拟表也可以在树状结构中呈现数据。 点击箭头图标，你可以展开或折叠树节点。</p><!----><h2 id="动态高度行" tabindex="-1">动态高度行 <a class="header-anchor vp-link" href="#动态高度行" aria-hidden="true">#</a></h2><p>虚拟表能够呈现具有动态高度的行数。 如果您正在处理数据并不确定内容大小， 此功能对于调整到内容高度的渲染行是理想的。 要启用此功能，请传递 <code>estimated-row-height</code> 属性。 估计高度越接近实际内容，渲染体验就越顺。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>每行高度在渲染过程中动态测量。 因此，如果您试图显示大量数据， UI <strong>可能会</strong> 抖动。</p></div><!----><h2 id="可展开的附加信息" tabindex="-1">可展开的附加信息 <a class="header-anchor vp-link" href="#可展开的附加信息" aria-hidden="true">#</a></h2><p>使用动态高度渲染，您也可以在表格中显示详细的视图。</p><!----><h2 id="自定义页脚" tabindex="-1">自定义页脚 <a class="header-anchor vp-link" href="#自定义页脚" aria-hidden="true">#</a></h2><p>自定义表格 footer， 通常用来展示一些汇总数据和信息。</p><!----><h2 id="自定义空元素渲染器" tabindex="-1">自定义空元素渲染器 <a class="header-anchor vp-link" href="#自定义空元素渲染器" aria-hidden="true">#</a></h2><p>渲染自定义的空元素</p><!----><h2 id="浮动遮罩层" tabindex="-1">浮动遮罩层 <a class="header-anchor vp-link" href="#浮动遮罩层" aria-hidden="true">#</a></h2><p>当您想要显示加载指示器之类的浮动元素，可以通过渲染一个浮动在表格之上的遮罩层来实现。</p><!----><h2 id="手动滚动" tabindex="-1">手动滚动 <a class="header-anchor vp-link" href="#手动滚动" aria-hidden="true">#</a></h2><p>使用 Table V2 暴露的方法可以进行手动或编程式的滚动到指定的偏移量或者行。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>scrollToRow</code> 的第二个参数代表滚动策略，计算了要滚动的位置，其默认值是 <code>auto</code>。 如果你想要滚动到某个特定位置，你可以自己定义战略。 可用的选项是 <code>&quot;auto&quot; | &quot;center&quot; | &quot;end&quot; | &quot;start&quot; | &quot;smart&quot;</code></p><p><code>smart</code> 和<code>auto</code> 之间的区别是， <code>auto</code> 是 <code>smart</code> 滚动策略的子集。</p></div><!----><h2 id="tablev2-属性" tabindex="-1">TableV2 属性 <a class="header-anchor vp-link" href="#tablev2-属性" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>属性名</th><th>描述说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>cache</td><td>为了更好的渲染效果预先多加载的行数</td><td>Number</td><td>2</td></tr><tr><td>estimated-row-height</td><td>渲染动态的单元格的预估高度</td><td>Number</td><td>—</td></tr><tr><td>header-class</td><td>header 部分的自定义 class 名</td><td>String/Function&lt;<a href="#typings" class="vp-link">HeaderClassGetter</a>&gt;</td><td>—</td></tr><tr><td>header-props</td><td>header 部分的自定义 props 名</td><td>Object/Function&lt;<a href="#typings" class="vp-link">HeaderPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>header-cell-props</td><td>header cell 部分的自定义 props 名</td><td>Object/Function&lt;<a href="#typings" class="vp-link">HeaderCellPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>header-height</td><td>Header 的高度由<code>height</code>设置。 如果传入数组，它会使 header row 等于数组长度</td><td>Number/Array&lt;Number&gt;</td><td>50</td></tr><tr><td>footer-height</td><td>Footer 部分的高度，当传入值时，这部分将被计算入 table 的高度里</td><td>Number</td><td>0</td></tr><tr><td>row-class</td><td>row wrapper 部分的自定义 class 名</td><td>String/Function&lt;<a href="#typings" class="vp-link">RowClassGetter</a>&gt;</td><td>—</td></tr><tr><td>row-key</td><td>每行的 key 值，如果不提供，将使用索引 index 代替</td><td>String/Symbol/Number</td><td>id</td></tr><tr><td>row-props</td><td>row component 部分的自定义 class 名</td><td>Object/Function&lt;<a href="#typings" class="vp-link">RowPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>row-height</td><td>每行的高度, 用于计算表的总高度</td><td>Number</td><td>50</td></tr><tr><td>cell-props</td><td>每个单元格 cell 的自定义 props (除了 header cell 以外)</td><td>Object/Function&lt;<a href="#typings" class="vp-link">CellPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>columns</td><td>列 column 的配置数组</td><td>Array&lt;<a href="#column-attribute" class="vp-link">Column</a>&gt;</td><td>—</td></tr><tr><td>data</td><td>要在表中渲染的数据数组</td><td>Array&lt;<a href="#typings" class="vp-link">Data</a>&gt;</td><td>[]</td></tr><tr><td>data-getter</td><td>一个自定义方法从数据源获取数据</td><td>Function</td><td>—</td></tr><tr><td>fixed-data</td><td>渲染行在表格主内容上方和 header 下方区域的数据</td><td>Array&lt;<a href="#typings" class="vp-link">Data</a>&gt;</td><td>—</td></tr><tr><td>expand-column-key</td><td>列的 key 来标记哪个行可以被展开</td><td>String</td><td>—</td></tr><tr><td>expanded-row-keys</td><td>存放行展开状态的 key 的数组，可以和 <code>v-model</code> 搭配使用</td><td>Array&lt;<a href="#typings" class="vp-link">KeyType</a>&gt;</td><td>—</td></tr><tr><td>default-expanded-row-keys</td><td>默认展开的行的 key 的数组, <strong>这个数据不是响应式的</strong></td><td>Array&lt;<a href="#typings" class="vp-link">KeyType</a>&gt;</td><td>—</td></tr><tr><td>class</td><td>表格的类名称，将应用于表格的全部的三个部分 (左、右、主)</td><td>String/Array/Object</td><td>—</td></tr><tr><td>fixed</td><td>单元格宽度是自适应还是固定</td><td>Boolean</td><td>false</td></tr><tr><td>width <span class="vp-tag required">required</span></td><td>表格的宽度</td><td>Number</td><td>—</td></tr><tr><td>height <span class="vp-tag required">required</span></td><td>表格的高度</td><td>Number</td><td>—</td></tr><tr><td>max-height</td><td>表格的最大高度</td><td>Number</td><td>—</td></tr><tr><td>h-scrollbar-size</td><td>配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。</td><td>Number</td><td>6</td></tr><tr><td>v-scrollbar-size</td><td>配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。</td><td>Number</td><td>6</td></tr><tr><td>scrollbar-always-on</td><td>如果开启，滚动条将一直显示，反之只会在鼠标经过时显示。</td><td>Boolean</td><td>false</td></tr><tr><td>sort-by</td><td>排序方式</td><td>Object&lt;<a href="#typings" class="vp-link">SortBy</a>&gt;</td><td>{}</td></tr><tr><td>sort-state</td><td>多个排序</td><td>Object&lt;<a href="#typings" class="vp-link">SortState</a>&gt;</td><td>undefined</td></tr></tbody></table></div><h2 id="tablev2-插槽" tabindex="-1">TableV2 插槽 <a class="header-anchor vp-link" href="#tablev2-插槽" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>插槽名</th><th>参数</th></tr></thead><tbody><tr><td>cell</td><td><a href="#typings" class="vp-link">CellSlotProps</a></td></tr><tr><td>header</td><td><a href="#typings" class="vp-link">HeaderSlotProps</a></td></tr><tr><td>header-cell</td><td><a href="#typings" class="vp-link">HeaderCellSlotProps</a></td></tr><tr><td>row</td><td><a href="#typings" class="vp-link">RowSlotProps</a></td></tr><tr><td>footer</td><td>—</td></tr><tr><td>empty</td><td>—</td></tr><tr><td>overlay</td><td>—</td></tr></tbody></table></div><h2 id="tablev2-事件" tabindex="-1">TableV2 事件 <a class="header-anchor vp-link" href="#tablev2-事件" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>事件名</th><th>描述</th><th>参数</th></tr></thead><tbody><tr><td>column-sort</td><td>列排序时调用</td><td>Object&lt;ColumnSortParam&gt;</td></tr><tr><td>expanded-rows-change</td><td>行展开状态改变时触发</td><td><code>Array&lt;KeyType&gt;</code></td></tr><tr><td>end-reached</td><td>到达表格末尾时触发</td><td>—</td></tr><tr><td>scroll</td><td>表格被用户滚动后触发</td><td>Object&lt;<a href="#typings" class="vp-link">ScrollParams</a>&gt;</td></tr><tr><td>rows-rendered</td><td>当行被渲染后触发</td><td>Object&lt;<a href="#typings" class="vp-link">RowsRenderedParams</a>&gt;</td></tr><tr><td>row-expand</td><td>点击箭头图标展开/折叠树节点时触发</td><td>Object&lt;<a href="#typings" class="vp-link">RowExpandParams</a>&gt;</td></tr><tr><td>row-event-handlers</td><td>当每行添加了一系列事件处理器时触发</td><td>Object&lt;<a href="#typings" class="vp-link">RowEventHandlers</a>&gt;</td></tr></tbody></table></div><h2 id="tablev2-方法" tabindex="-1">TableV2 方法 <a class="header-anchor vp-link" href="#tablev2-方法" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>事件名</th><th>描述</th><th>参数</th></tr></thead><tbody><tr><td>scrollTo</td><td>滚动到给定位置</td><td><code>{ scrollLeft?: number, scrollTop?: number}</code></td></tr><tr><td>scrollToLeft</td><td>滚动到给定的水平位置</td><td><code>scrollLeft: number</code></td></tr><tr><td>scrollToTop</td><td>滚动到给定的垂直位置</td><td><code>scrollTop: number</code></td></tr><tr><td>scrollToRow</td><td>使用给定的滚动策略滚动至指定行</td><td><code>row: number, strategy?: &quot;auto&quot; |&quot;center&quot; | &quot;end&quot; | &quot;start&quot; | &quot;smart&quot;</code></td></tr></tbody></table></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>请注意：这些是 <code>JavaScript</code> 对象，所以您 <strong>不能使用</strong> 短横线命名法（kebab-case）来处理这些属性</p></div><h2 id="column-属性" tabindex="-1">Column 属性 <a class="header-anchor vp-link" href="#column-属性" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>属性名</th><th>描述</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>align</td><td>表格单元格内容对齐方式</td><td><a href="https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6" class="vp-link" target="_blank" rel="noopener noreferrer">Alignment<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></td><td>left</td></tr><tr><td>class</td><td>列的类名</td><td>String</td><td>—</td></tr><tr><td>fixed</td><td>固定列位置</td><td>Boolean/<a href="https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11" class="vp-link" target="_blank" rel="noopener noreferrer">FixedDir<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></td><td>false</td></tr><tr><td>flexGrow</td><td>CSS 属性 flex grow, 仅当不是固定表时才生效</td><td>Number</td><td>0</td></tr><tr><td>flexShrink</td><td>CSS 属性 flex shrink, 仅当不是固定表时才生效</td><td>Number</td><td>1</td></tr><tr><td>headerClass</td><td>自定义 header 头部类名</td><td>String</td><td>—</td></tr><tr><td>hidden</td><td>此列是否不可见</td><td>Boolean</td><td>—</td></tr><tr><td>style</td><td>自定义列单元格的类名，将会与 gird 单元格合并</td><td>CSSProperties</td><td>—</td></tr><tr><td>sortable</td><td>设置列是否可排序</td><td>Boolean</td><td>—</td></tr><tr><td>title</td><td>Header 头部单元格中的默认文本</td><td>String</td><td>—</td></tr><tr><td>maxWidth</td><td>列的最大宽度</td><td>Number</td><td>—</td></tr><tr><td>minWidth</td><td>列的最小宽度</td><td>Number</td><td>—</td></tr><tr><td>width <span class="vp-tag required">required</span></td><td>列宽度</td><td>Number</td><td>—</td></tr><tr><td>cellRenderer</td><td>自定义单元格渲染器</td><td>VueComponent/(props: <a href="#typings" class="vp-link">CellRenderProps</a>) =&gt; VNode</td><td>—</td></tr><tr><td>headerCellRenderer</td><td>自定义头部渲染器</td><td>VueComponent/(props: <a href="#typings" class="vp-link">HeaderRenderProps</a>) =&gt; VNode</td><td>—</td></tr></tbody></table></div><h2 id="typings" tabindex="-1">Typings <a class="header-anchor vp-link" href="#typings" aria-hidden="true">#</a></h2><details><summary>显示类型声明</summary><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">HeaderClassGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderCellPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">RowClassGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>

<span class="token keyword">type</span> <span class="token class-name">RowPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">CellPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  cellData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>

<span class="token keyword">type</span> <span class="token class-name">CellRenderProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  cellData<span class="token operator">:</span> <span class="token constant">T</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderRenderProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">ScrollParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  xAxisScrollDir<span class="token operator">:</span> <span class="token string">&#39;forward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;backward&#39;</span>
  scrollLeft<span class="token operator">:</span> <span class="token builtin">number</span>
  yAxisScrollDir<span class="token operator">:</span> <span class="token string">&#39;forward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;backward&#39;</span>
  scrollTop<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">CellSlotProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  depth<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  isScrolling<span class="token operator">:</span> <span class="token builtin">boolean</span>
  expandIconProps<span class="token operator">?</span><span class="token operator">:</span>
    <span class="token operator">|</span> <span class="token punctuation">{</span>
        rowData<span class="token operator">:</span> <span class="token builtin">any</span>
        rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
        <span class="token function-variable function">onExpand</span><span class="token operator">:</span> <span class="token punctuation">(</span>expand<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
      <span class="token punctuation">}</span>
    <span class="token operator">|</span> <span class="token keyword">undefined</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  cells<span class="token operator">:</span> VNode<span class="token punctuation">[</span><span class="token punctuation">]</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderCellSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">class</span><span class="token operator">:</span> <span class="token builtin">string</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
  headerCellProps<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span>
  sortBy<span class="token operator">:</span> SortBy
  sortState<span class="token operator">?</span><span class="token operator">:</span> SortState <span class="token operator">|</span> <span class="token keyword">undefined</span>
  <span class="token function-variable function">onColumnSorted</span><span class="token operator">:</span> <span class="token punctuation">(</span>e<span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowCommonParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowEventHandlerParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowKey<span class="token operator">:</span> KeyType
  event<span class="token operator">:</span> Event
<span class="token punctuation">}</span> <span class="token operator">&amp;</span> RowCommonParams

<span class="token keyword">type</span> <span class="token class-name">RowEventHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>params<span class="token operator">:</span> RowEventHandlerParams<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token keyword">type</span> <span class="token class-name">RowEventHandlers</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  onClick<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onContextmenu<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onDblclick<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onMouseenter<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onMouseleave<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowsRenderedParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowCacheStart<span class="token operator">:</span> <span class="token builtin">number</span>
  rowCacheEnd<span class="token operator">:</span> <span class="token builtin">number</span>
  rowVisibleStart<span class="token operator">:</span> <span class="token builtin">number</span>
  rowVisibleEnd<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  data<span class="token operator">:</span> <span class="token builtin">any</span>
  key<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span>
  isScrolling<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  style<span class="token operator">:</span> CSSProperties
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowExpandParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  expanded<span class="token operator">:</span> <span class="token builtin">boolean</span>
  rowKey<span class="token operator">:</span> KeyType
<span class="token punctuation">}</span> <span class="token operator">&amp;</span> RowCommonParams

<span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> KeyType<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span>
  children<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">FixedData</span> <span class="token operator">=</span> Data

<span class="token keyword">type</span> <span class="token class-name">KeyType</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">symbol</span>

<span class="token keyword">type</span> <span class="token class-name">ColumnSortParam<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> key<span class="token operator">:</span> KeyType<span class="token punctuation">;</span> order<span class="token operator">:</span> SortOrder <span class="token punctuation">}</span>

<span class="token keyword">enum</span> SortOrder <span class="token punctuation">{</span>
  <span class="token constant">ASC</span> <span class="token operator">=</span> <span class="token string">&#39;asc&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">DESC</span> <span class="token operator">=</span> <span class="token string">&#39;desc&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">SortBy</span> <span class="token operator">=</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> KeyType<span class="token punctuation">;</span> Order<span class="token operator">:</span> SortOrder <span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name">SortState</span> <span class="token operator">=</span> Record<span class="token operator">&lt;</span>KeyType<span class="token punctuation">,</span> SortOrder<span class="token operator">&gt;</span>
</code></pre></div></details><h2 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor vp-link" href="#常见问题" aria-hidden="true">#</a></h2><h4 id="如何在第一列中渲染带复选框的列表？" tabindex="-1">如何在第一列中渲染带复选框的列表？ <a class="header-anchor vp-link" href="#如何在第一列中渲染带复选框的列表？" aria-hidden="true">#</a></h4><p>由于可以自己定义单元格渲染器，您可以根据示例 <a href="#customize-cell-renderer" class="vp-link">自定义单元格渲染器</a> 代码来渲染 <code>checkbox</code>，并自行管理其状态。</p><h4 id="为什么虚拟化表提供的功能较-tablev1-少？" tabindex="-1">为什么虚拟化表提供的功能较 <a href="./table.html" class="vp-link">TableV1</a> 少？ <a class="header-anchor vp-link" href="#为什么虚拟化表提供的功能较-tablev1-少？" aria-hidden="true">#</a></h4><p>对于虚拟化表格，我们打算减少一些功能，让用户根据需求自行实现。 整合过多的功能会让组件的代码变得难以维护，且对于大多数用户来说，基础功能就已足够。 一些主要的功能尚未开发。 我们很希望听从您的意见。 进入 <a href="https://discord.com/invite/gXK9XNzW3X" class="vp-link" target="_blank" rel="noopener noreferrer">Discord<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> 持续关注.</p><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor vp-link" href="#源代码" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/table-v2" class="vp-link" target="_blank" rel="noopener noreferrer">组件<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/table-v2.md" class="vp-link" target="_blank" rel="noopener noreferrer">文档<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="贡献者" tabindex="-1">贡献者 <a class="header-anchor vp-link" href="#贡献者" aria-hidden="true">#</a></h2><div class="mb-4" data-v-2c2cd08f><div class="flex flex-wrap gap-4 pt-2" data-v-2c2cd08f><!--[--><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jw-foss" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> JeremyWuuuuu<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> btea<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/tolking" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23313167?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> qiang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Tsong-LC" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/50739490?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LIUCHAO<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/makedopamine" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/93767616?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> dopamine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/holazz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23100055?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> kooriookami<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 云游君<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Whbbit1999" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/60510247?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Whbbit1999<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/FrontEndDog" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46493087?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 一只前端汪<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MrWeilian" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30046649?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 井柏然<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaochenchen-igg-com" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/169252980?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 三咲智子<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/webfansplz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/22515951?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> webfansplz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zwgwf" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/134276765?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zwgwf<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/warmthsea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45450994?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sea / 神秘海<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/KimYangOfCat" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/32960305?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kim Yang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/SignDawn" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/48878568?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> SignDawn<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/lxKylin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/75473409?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kylin<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kankan-web" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/78799103?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Mafia<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/yj-liuzepeng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/75007029?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zepeng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MilesTails01" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/83541965?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Tommy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/huangguangfa" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46232212?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> xy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/onishi-kohei" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/62194324?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 0024<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/loosheng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30114549?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LooSheng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/iamkun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17680888?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> iamkun<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://crowdin.com/translate/element-plus/all/en-zhcn" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>在 Crowdin 上编辑此页面 <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/zh-CN/component/table" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Table 表格</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/zh-CN/component/tag" data-v-8ad25866><span class="text" data-v-8ad25866>Tag 标签</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-6f13b908><nav class="toc-content" data-v-6f13b908><h3 class="toc-content__heading" data-v-6f13b908>Contents</h3><!----><p class="text-14px font-300 color-$text-color-secondary" data-v-6f13b908>赞助商</p><div class="join sponsors-button mt-4 w-100%" data-v-6f13b908><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ariadisabled="false" type="button" class="el-button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->成为赞助商！<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="right-big" data-v-6f13b908 data-v-1a999eaa><!--[--><a href="http://github.crmeb.net/u/Element?from=element-plus" title="CRMEB - 高品质开源商城系统 累计服务40W+开发者" target="_blank" data-v-1a999eaa><div class="flex bg-#F9F9F9 h-64px rd-4px justify-center items-center" data-v-1a999eaa><div class="h-36px" data-v-1a999eaa><img class="rd-4px h-full" src="/images/sponsors/CRMEB-l.png" alt="CRMEB" data-v-1a999eaa></div></div></a><!--]--></div><div class="flex flex-wrap justify-between right-small" data-v-6f13b908 data-v-1e0a70fc><!--[--><!--[--><a href="https://doc.buildadmin.com/?from=element-plus" title="BuildAdmin - Vue3企业级开源后台管理系统" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/buildadmin-l.png" alt="BuildAdmin" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="http://www.i-renderer.love/home/index" title="百搭云 - 快速且优雅的低代码平台" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/baidayun.png" alt="百搭云" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/bit-l.png" alt="bit" data-v-1e0a70fc></div></a><!--]--><!--[--><div class="flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><div class="color-#ddd text-13px cursor-default" data-v-1e0a70fc>Your logo</div></div><!--]--><!--]--></div><div class="right-rich" data-v-6f13b908 data-v-84253628><!--[--><!--]--></div></nav></aside></div><footer class="footer"><div class="footer-main"><h4>链接</h4><a href="https://github.com/element-plus/element-plus" class="footer-main-link" target="_blank">GitHub</a><a href="https://cn.element-plus.org/zh-CN/" class="footer-main-link" target="_blank">国内镜像站点 🇨🇳</a><a href="https://github.com/element-plus/element-plus/releases" class="footer-main-link" target="_blank">更新日志</a><a href="https://element.eleme.io/" class="footer-main-link" target="_blank">Element UI for Vue 2</a></div><div class="footer-main"><h4>社区</h4><a href="https://discord.com/invite/gXK9XNzW3X" class="footer-main-link" target="_blank">Discord</a><a href="https://github.com/element-plus/element-plus/issues" class="footer-main-link" target="_blank">建议反馈</a><a href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md" class="footer-main-link" target="_blank">参与贡献</a><a href="https://segmentfault.com/t/element-plus" class="footer-main-link" target="_blank">SegmentFault</a></div></footer></main><!----></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ff7dffa4\",\"en-us_component_alert.md\":\"cd5a1e5a\",\"en-us_component_anchor.md\":\"9a48cc9f\",\"en-us_component_autocomplete.md\":\"0f589547\",\"en-us_component_avatar.md\":\"02c0aba6\",\"en-us_component_backtop.md\":\"7b0c1932\",\"en-us_component_badge.md\":\"002e14a4\",\"en-us_component_border.md\":\"1ca6f965\",\"en-us_component_breadcrumb.md\":\"2ef63731\",\"en-us_component_button.md\":\"1063d204\",\"en-us_component_calendar.md\":\"eb9d1675\",\"en-us_component_card.md\":\"39e55f42\",\"en-us_component_carousel.md\":\"32115767\",\"en-us_component_cascader.md\":\"bf8dbc75\",\"en-us_component_checkbox.md\":\"98dc0f53\",\"en-us_component_collapse.md\":\"67a5c313\",\"en-us_component_color-picker.md\":\"50cd4caa\",\"en-us_component_color.md\":\"29417b31\",\"en-us_component_config-provider.md\":\"3463b447\",\"en-us_component_container.md\":\"85e4bdf3\",\"en-us_component_date-picker.md\":\"68c06f9e\",\"en-us_component_datetime-picker.md\":\"b999a872\",\"en-us_component_descriptions.md\":\"339dc63b\",\"en-us_component_dialog.md\":\"2cf8cf86\",\"en-us_component_divider.md\":\"421eb5f2\",\"en-us_component_drawer.md\":\"024b53e9\",\"en-us_component_dropdown.md\":\"7ac24bed\",\"en-us_component_empty.md\":\"29b5b47b\",\"en-us_component_form.md\":\"7458dbb1\",\"en-us_component_icon.md\":\"3426aa0f\",\"en-us_component_image.md\":\"ac3532a8\",\"en-us_component_infinite-scroll.md\":\"4c6f7159\",\"en-us_component_input-number.md\":\"a5c4cb11\",\"en-us_component_input.md\":\"c16e2da7\",\"en-us_component_layout.md\":\"2b2af71d\",\"en-us_component_link.md\":\"d30a5d74\",\"en-us_component_loading.md\":\"c6e5ea76\",\"en-us_component_menu.md\":\"e0e7d7ac\",\"en-us_component_message-box.md\":\"fc32bd92\",\"en-us_component_message.md\":\"cd41cb05\",\"en-us_component_notification.md\":\"56a6f299\",\"en-us_component_overview.md\":\"110e854b\",\"en-us_component_page-header.md\":\"38a29a2d\",\"en-us_component_pagination.md\":\"fe79df34\",\"en-us_component_popconfirm.md\":\"503fa4ae\",\"en-us_component_popover.md\":\"e14a3c24\",\"en-us_component_progress.md\":\"3b77a4ca\",\"en-us_component_radio.md\":\"95514d81\",\"en-us_component_rate.md\":\"3ed19909\",\"en-us_component_result.md\":\"081f424e\",\"en-us_component_scrollbar.md\":\"9562ac05\",\"en-us_component_segmented.md\":\"43777257\",\"en-us_component_select-v2.md\":\"8273ca64\",\"en-us_component_select.md\":\"6dfded09\",\"en-us_component_skeleton.md\":\"e5852963\",\"en-us_component_slider.md\":\"16325e17\",\"en-us_component_space.md\":\"3f2861d9\",\"en-us_component_statistic.md\":\"2a66f18b\",\"en-us_component_steps.md\":\"c0c48d3f\",\"en-us_component_switch.md\":\"bc045b26\",\"en-us_component_table-v2.md\":\"2105af2e\",\"en-us_component_table.md\":\"f8c35834\",\"en-us_component_tabs.md\":\"f908f1e5\",\"en-us_component_tag.md\":\"77cd984c\",\"en-us_component_text.md\":\"1580f3e6\",\"en-us_component_time-picker.md\":\"84d6f56c\",\"en-us_component_time-select.md\":\"be608e21\",\"en-us_component_timeline.md\":\"186bed11\",\"en-us_component_tooltip-v2.md\":\"a6daced0\",\"en-us_component_tooltip.md\":\"231fba09\",\"en-us_component_tour.md\":\"837136bc\",\"en-us_component_transfer.md\":\"91a8f888\",\"en-us_component_tree-select.md\":\"5479b050\",\"en-us_component_tree-v2.md\":\"9dc2154b\",\"en-us_component_tree.md\":\"955130e4\",\"en-us_component_typography.md\":\"daf0375f\",\"en-us_component_upload.md\":\"d9accc95\",\"en-us_component_watermark.md\":\"443e8fcb\",\"en-us_guide_changelog.md\":\"3c084145\",\"en-us_guide_commit-examples.md\":\"cc45ed9c\",\"en-us_guide_dark-mode.md\":\"9256892d\",\"en-us_guide_design.md\":\"eac1a1f4\",\"en-us_guide_dev-faq.md\":\"cf746748\",\"en-us_guide_dev-guide.md\":\"d06336e2\",\"en-us_guide_i18n.md\":\"bd361557\",\"en-us_guide_installation.md\":\"85f92b17\",\"en-us_guide_migration.md\":\"0c9aab31\",\"en-us_guide_namespace.md\":\"6affb523\",\"en-us_guide_nav.md\":\"725829ca\",\"en-us_guide_quickstart.md\":\"27523655\",\"en-us_guide_ssr.md\":\"44fd7343\",\"en-us_guide_theming.md\":\"ae3aa2cd\",\"en-us_guide_transitions.md\":\"270de32e\",\"en-us_guide_translation.md\":\"eaabac54\",\"en-us_index.md\":\"2d298cdd\",\"en-us_resource_index.md\":\"34f01ea5\",\"es-es_component_affix.md\":\"6a1bdcbe\",\"es-es_component_alert.md\":\"aa7f77f7\",\"es-es_component_anchor.md\":\"763d2056\",\"es-es_component_autocomplete.md\":\"c422535c\",\"es-es_component_avatar.md\":\"391d791e\",\"es-es_component_backtop.md\":\"97c778cd\",\"es-es_component_badge.md\":\"d4198a37\",\"es-es_component_border.md\":\"c4431903\",\"es-es_component_breadcrumb.md\":\"d8545b03\",\"es-es_component_button.md\":\"e539188f\",\"es-es_component_calendar.md\":\"f682be1c\",\"es-es_component_card.md\":\"4d07a461\",\"es-es_component_carousel.md\":\"5f248bd0\",\"es-es_component_cascader.md\":\"f1da98ff\",\"es-es_component_checkbox.md\":\"e9665537\",\"es-es_component_collapse.md\":\"63f23fe8\",\"es-es_component_color-picker.md\":\"35223bc5\",\"es-es_component_color.md\":\"ecf66faa\",\"es-es_component_config-provider.md\":\"62ac5005\",\"es-es_component_container.md\":\"5844a08e\",\"es-es_component_date-picker.md\":\"a8755dbd\",\"es-es_component_datetime-picker.md\":\"445a7fe9\",\"es-es_component_descriptions.md\":\"7a88f91a\",\"es-es_component_dialog.md\":\"dcf50de9\",\"es-es_component_divider.md\":\"6f5b07f5\",\"es-es_component_drawer.md\":\"140c918c\",\"es-es_component_dropdown.md\":\"bcce96bc\",\"es-es_component_empty.md\":\"ccd86c17\",\"es-es_component_form.md\":\"f61ce21a\",\"es-es_component_icon.md\":\"50ac8e2d\",\"es-es_component_image.md\":\"8df18281\",\"es-es_component_infinite-scroll.md\":\"4419ba97\",\"es-es_component_input-number.md\":\"f8e08c67\",\"es-es_component_input.md\":\"c22c21f5\",\"es-es_component_layout.md\":\"787b2ad6\",\"es-es_component_link.md\":\"a79dfebf\",\"es-es_component_loading.md\":\"ae2cc3a8\",\"es-es_component_menu.md\":\"0adc6293\",\"es-es_component_message-box.md\":\"285f035c\",\"es-es_component_message.md\":\"b523dd42\",\"es-es_component_notification.md\":\"a0c9ea84\",\"es-es_component_overview.md\":\"5c7beefe\",\"es-es_component_page-header.md\":\"fbdbe268\",\"es-es_component_pagination.md\":\"6d21ed8c\",\"es-es_component_popconfirm.md\":\"944cf7f2\",\"es-es_component_popover.md\":\"c5c82a9d\",\"es-es_component_progress.md\":\"09e7e5fa\",\"es-es_component_radio.md\":\"7e9e6292\",\"es-es_component_rate.md\":\"8b333a70\",\"es-es_component_result.md\":\"403b624b\",\"es-es_component_scrollbar.md\":\"b9593bab\",\"es-es_component_segmented.md\":\"64c094d9\",\"es-es_component_select-v2.md\":\"95c9a85e\",\"es-es_component_select.md\":\"692b62a4\",\"es-es_component_skeleton.md\":\"0e6b07c4\",\"es-es_component_slider.md\":\"8e33f911\",\"es-es_component_space.md\":\"1b2a1f23\",\"es-es_component_statistic.md\":\"152a0721\",\"es-es_component_steps.md\":\"2d5805b7\",\"es-es_component_switch.md\":\"d44665e8\",\"es-es_component_table-v2.md\":\"84df4bd5\",\"es-es_component_table.md\":\"18789f35\",\"es-es_component_tabs.md\":\"d72771ad\",\"es-es_component_tag.md\":\"43e81918\",\"es-es_component_text.md\":\"1fcfb5cb\",\"es-es_component_time-picker.md\":\"bf4c067e\",\"es-es_component_time-select.md\":\"92f79417\",\"es-es_component_timeline.md\":\"4c2ff30c\",\"es-es_component_tooltip-v2.md\":\"8b8acbad\",\"es-es_component_tooltip.md\":\"4991646a\",\"es-es_component_tour.md\":\"11bc9eff\",\"es-es_component_transfer.md\":\"e8315055\",\"es-es_component_tree-select.md\":\"8481ec73\",\"es-es_component_tree-v2.md\":\"1f8e11fe\",\"es-es_component_tree.md\":\"13b0bb92\",\"es-es_component_typography.md\":\"9270c5de\",\"es-es_component_upload.md\":\"574f8475\",\"es-es_component_watermark.md\":\"5430e1d8\",\"es-es_guide_changelog.md\":\"1a5b87b0\",\"es-es_guide_commit-examples.md\":\"e6a58951\",\"es-es_guide_dark-mode.md\":\"85f904cf\",\"es-es_guide_design.md\":\"dd162f49\",\"es-es_guide_dev-faq.md\":\"7c4ae8da\",\"es-es_guide_dev-guide.md\":\"3ae1c952\",\"es-es_guide_i18n.md\":\"2118baa5\",\"es-es_guide_installation.md\":\"95803516\",\"es-es_guide_migration.md\":\"3f132e7e\",\"es-es_guide_namespace.md\":\"9856f155\",\"es-es_guide_nav.md\":\"63349cda\",\"es-es_guide_quickstart.md\":\"b1ad1aef\",\"es-es_guide_ssr.md\":\"791df483\",\"es-es_guide_theming.md\":\"97ccf28e\",\"es-es_guide_transitions.md\":\"29cf69a4\",\"es-es_guide_translation.md\":\"5bcefea4\",\"es-es_index.md\":\"1c9a711f\",\"es-es_resource_index.md\":\"f1abbb68\",\"index.md\":\"fe916efd\",\"zh-cn_component_affix.md\":\"cf647355\",\"zh-cn_component_alert.md\":\"eca392e8\",\"zh-cn_component_anchor.md\":\"7a786896\",\"zh-cn_component_autocomplete.md\":\"0fde91c7\",\"zh-cn_component_avatar.md\":\"ba24b56b\",\"zh-cn_component_backtop.md\":\"460d34db\",\"zh-cn_component_badge.md\":\"681178b5\",\"zh-cn_component_border.md\":\"87fc466a\",\"zh-cn_component_breadcrumb.md\":\"535bd42c\",\"zh-cn_component_button.md\":\"4128e583\",\"zh-cn_component_calendar.md\":\"d680314d\",\"zh-cn_component_card.md\":\"0f0f5afe\",\"zh-cn_component_carousel.md\":\"f902fc9f\",\"zh-cn_component_cascader.md\":\"c569aa5b\",\"zh-cn_component_checkbox.md\":\"54316312\",\"zh-cn_component_collapse.md\":\"26965384\",\"zh-cn_component_color-picker.md\":\"5f013e2e\",\"zh-cn_component_color.md\":\"b37f2def\",\"zh-cn_component_config-provider.md\":\"7e48316b\",\"zh-cn_component_container.md\":\"43636a70\",\"zh-cn_component_date-picker.md\":\"0217cca1\",\"zh-cn_component_datetime-picker.md\":\"60d69e0b\",\"zh-cn_component_descriptions.md\":\"6a2c5fcc\",\"zh-cn_component_dialog.md\":\"ba52e130\",\"zh-cn_component_divider.md\":\"639191e5\",\"zh-cn_component_drawer.md\":\"3a0bf571\",\"zh-cn_component_dropdown.md\":\"fa84f7c5\",\"zh-cn_component_empty.md\":\"c7635b32\",\"zh-cn_component_form.md\":\"d52ec6dc\",\"zh-cn_component_icon.md\":\"0487a8b6\",\"zh-cn_component_image.md\":\"9c120e45\",\"zh-cn_component_infinite-scroll.md\":\"38f46d39\",\"zh-cn_component_input-number.md\":\"8a71ee3f\",\"zh-cn_component_input.md\":\"d35eeb9c\",\"zh-cn_component_layout.md\":\"bc675fd0\",\"zh-cn_component_link.md\":\"89225971\",\"zh-cn_component_loading.md\":\"c9fae5ab\",\"zh-cn_component_menu.md\":\"bc7746a1\",\"zh-cn_component_message-box.md\":\"cb16e084\",\"zh-cn_component_message.md\":\"8be6a0d4\",\"zh-cn_component_notification.md\":\"002c9ad3\",\"zh-cn_component_overview.md\":\"3c3503ad\",\"zh-cn_component_page-header.md\":\"f1153fa0\",\"zh-cn_component_pagination.md\":\"7e316c0d\",\"zh-cn_component_popconfirm.md\":\"c8c261e8\",\"zh-cn_component_popover.md\":\"33396fe1\",\"zh-cn_component_progress.md\":\"a45ad1c6\",\"zh-cn_component_radio.md\":\"8d6a36fc\",\"zh-cn_component_rate.md\":\"b9374d23\",\"zh-cn_component_result.md\":\"da3ebb19\",\"zh-cn_component_scrollbar.md\":\"ed75c308\",\"zh-cn_component_segmented.md\":\"e983c8d7\",\"zh-cn_component_select-v2.md\":\"67dccf39\",\"zh-cn_component_select.md\":\"6d3c3517\",\"zh-cn_component_skeleton.md\":\"f43e715e\",\"zh-cn_component_slider.md\":\"a4306965\",\"zh-cn_component_space.md\":\"a3738b82\",\"zh-cn_component_statistic.md\":\"5bf4a0ca\",\"zh-cn_component_steps.md\":\"268b6c0d\",\"zh-cn_component_switch.md\":\"fee6f016\",\"zh-cn_component_table-v2.md\":\"7351c605\",\"zh-cn_component_table.md\":\"191078c2\",\"zh-cn_component_tabs.md\":\"43ccd873\",\"zh-cn_component_tag.md\":\"3243911c\",\"zh-cn_component_text.md\":\"e78046cb\",\"zh-cn_component_time-picker.md\":\"c889f795\",\"zh-cn_component_time-select.md\":\"9037b9bc\",\"zh-cn_component_timeline.md\":\"31c1d81c\",\"zh-cn_component_tooltip-v2.md\":\"7d03850d\",\"zh-cn_component_tooltip.md\":\"a254e320\",\"zh-cn_component_tour.md\":\"c2d42a56\",\"zh-cn_component_transfer.md\":\"f9d17f68\",\"zh-cn_component_tree-select.md\":\"be190e71\",\"zh-cn_component_tree-v2.md\":\"33e2a835\",\"zh-cn_component_tree.md\":\"c0d917d7\",\"zh-cn_component_typography.md\":\"958c01ce\",\"zh-cn_component_upload.md\":\"5e3a45cf\",\"zh-cn_component_watermark.md\":\"709c9962\",\"zh-cn_guide_changelog.md\":\"006e3eb8\",\"zh-cn_guide_commit-examples.md\":\"470a0272\",\"zh-cn_guide_dark-mode.md\":\"a8280f1d\",\"zh-cn_guide_design.md\":\"ecdfbc64\",\"zh-cn_guide_dev-faq.md\":\"3f406323\",\"zh-cn_guide_dev-guide.md\":\"fc4f7b58\",\"zh-cn_guide_i18n.md\":\"2bd9c6ed\",\"zh-cn_guide_installation.md\":\"8dda845f\",\"zh-cn_guide_migration.md\":\"152c0c06\",\"zh-cn_guide_namespace.md\":\"1489fc56\",\"zh-cn_guide_nav.md\":\"c82ea1cc\",\"zh-cn_guide_quickstart.md\":\"598a5162\",\"zh-cn_guide_ssr.md\":\"1faa6801\",\"zh-cn_guide_theming.md\":\"22b9a49a\",\"zh-cn_guide_transitions.md\":\"b40dd547\",\"zh-cn_guide_translation.md\":\"87f8e34c\",\"zh-cn_index.md\":\"209bfa3f\",\"zh-cn_resource_index.md\":\"07b05f83\"}")</script>
    <script type="module" async src="/assets/app.9c6c24e4.js"></script>
    
  </body>
</html>